Pawpuccino: GIT 417 Final Project
Project Requirements
The goal of the Pawpuccino website was to create a single page website implementing HTML, CSS, and Javascript from scratch. The site is to be displayed at a fixed width of 1280px and should appear as a real stand-alone website. It was required to have both a light and a dark mode, a functional contact form, and specific required Javascript elements.
Content
I chose to organize the content in a way that implied the importance of each section. The first section is an about me section, explaining what Pawpuccino is and the goals of the company. After meeting the brand, the user then gets to meet the cats. Each cat has their name, their image, and a description of their personality and whether they are up for adoption. The user is then able to play a game for an opportunity to win a piece of merchandise with the permanent residents of the cafe on it. At the end of the page is the contact form for any inquiries, suggestions, potential adoptions, or any other comments and questions the user has. Based on the requirements of the project, I wanted to use a company that did not already exist and also combines my current job as a barista and my love of cats. I had the idea initially after searching through stock photos for inspiration and tried to come up with a way that I could use cats without trying to sell the cats themselves.
Product Display
A product display was a project requirement which was implemented in a way to introduce the cats of Pawpuccino using Javascript. A button press with the cats names would bring up a picture of the cat (all images sourced from Adobe Stock), their name, and a description of their personality. On page load, a picture of coffee and a prompt to click on a cats name is shown.
Game Play
A number guessing game was created using Javascript by comparing an entered number to a randomly generated number. On a win, the player is notified that they have won a piece of merchandise with one of the cafe's permanent residents. On a loss, the player is told to try again.
Contact Form
A contact form was created prompting the user of the website to enter their name, email, and either their phone number or email to be contacted in their preferred method. The user is required to enter a comment in order to send the form. If any of the required inputs are not filled in, the user is prompted to fill the missing input. On completion, an object with the users information is created using Javascript and is pushed to the screen and the form is cleared to be used again.
Planning
I started the project initially by looking at stock images for inspiration. After coming up with the idea of Pawpuccino, I began to create my wireframes based off the project requirements. Initially, the site was going to contain an automatic slideshow in the "About Us" section but that was later scrapped for time. After creating the wireframe, I began to write the HTML for the website to place the content and found all of the stock images on Adobe Stock and the favicon on Icons8. After completing the first draft of the HTML and validating, I began working on the Javascript and implementing each element in order and worked on them one at a time. After finishing with the Javascript, I began to gather a few color palettes and looked through fonts to work on the CSS. I went through several color palettes before ending on the final product. While choosing a font and a color palette I wanted the end project to feel soft because of the combination of cats and coffee.
Branding
Reflection
While I'm overall satisfied with the end product with the amount of time I was able to work on it, I'm not completely satisfied. I struggled with a color palette that could work well in both light mode and dark mode and am still not completely satisfied with it in the end. I went through several color palettes before finally settling on the color palette that I did, though I would probably spend more time on it if I had it. I also would like to eventually go back and add in more cats to the "Meet Our Cats" section and add in the slideshow that I was originally planning on putting in the "About Us" section. I also eventually would like to make the website responsive because it's currently at a fixed width of 1280px. The HTML was written semantically and although it is not completely accessible, that is something I would like to go back and do.
